<template>
  <div class="message-detail-container">
    <div v-if="!message" class="empty-state">
      <el-empty description="消息不存在" />
      <el-button type="primary" @click="goBack">返回消息列表</el-button>
    </div>
    
    <div v-else class="message-detail">
      <div class="detail-header">
        <el-button
          type="text"
          @click="goBack"
          class="back-button"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        
        <div class="header-actions">
          <el-button
            type="text"
            @click="handleToggleRead"
          >
            {{ message.isRead ? '标记未读' : '标记已读' }}
          </el-button>
          
          <el-button
            type="text"
            @click="handleDelete"
            class="delete-button"
          >
            删除
          </el-button>
        </div>
      </div>
      
      <div class="detail-content">
        <div class="message-header">
          <h1 class="message-title">{{ message.title }}</h1>
          <div class="message-meta">
            <span class="message-source">来源：{{ message.source }}</span>
            <span class="message-time">{{ formatTime(message.timestamp) }}</span>
          </div>
        </div>
        
        <div class="message-body">
          <div class="message-content" v-html="formatContent(message.content)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useMessageStore } from '../stores/message'
import { formatDistanceToNow } from '../utils/date'

const route = useRoute()
const router = useRouter()
const messageStore = useMessageStore()

const messageId = computed(() => route.params.id)
const message = computed(() => messageStore.currentMessage)

const goBack = () => {
  router.push('/main/messages')
}

const handleToggleRead = () => {
  if (message.value) {
    if (message.value.isRead) {
      message.value.isRead = false
    } else {
      messageStore.markAsRead(message.value.id)
    }
  }
}

const handleDelete = async () => {
  if (!message.value) return
  
  try {
    await ElMessageBox.confirm(
      `确定要删除消息"${message.value.title}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    messageStore.deleteMessage(message.value.id)
    ElMessage.success('消息已删除')
    goBack()
  } catch (error) {
    // 用户取消
  }
}

const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

const formatContent = (content) => {
  return content.replace(/\n/g, '<br>')
}

onMounted(() => {
  messageStore.setCurrentMessage(messageId.value)
})
</script>

<style lang="scss" scoped>
.message-detail-container {
  height: 100vh;
  background: white;
}

.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.message-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid $border-color;
  
  .back-button {
    color: $text-color-regular;
    
    &:hover {
      color: $primary-color;
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
    
    .delete-button {
      color: $danger-color;
      
      &:hover {
        background: rgba($danger-color, 0.1);
      }
    }
  }
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.message-header {
  margin-bottom: 24px;
  
  .message-title {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 600;
    color: $text-color-primary;
    line-height: 1.4;
  }
  
  .message-meta {
    display: flex;
    gap: 20px;
    color: $text-color-secondary;
    font-size: 14px;
    
    .message-source {
      background: $bg-color;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
}

.message-body {
  .message-content {
    font-size: 15px;
    line-height: 1.6;
    color: $text-color-primary;
    
    :deep(br) {
      margin-bottom: 8px;
    }
  }
}
</style>